<template>
  <!-- 屏幕左右滑动切换tabs功能组件 -->
  <view class="tk-screen-scroll" @touchstart="touchStart" @touchend="touchEnd"
  :style="{'min-height': `calc(100vh - ${height}px)` }">
    <slot></slot>
  </view>
</template>
<script>
export default {
	props: {
		list: {
			// tabs 项数 也叫长度
			type: Array,
		},
		loading: {
			type: Boolean,
		},
		//  父元素当前激活的值
		active: {
			type: Number,
		}, 
		height: {
			type: Number,
			default: 0
		},
		isOnlytkScreen: {
			// 是否仅仅滑动页面不需要切换tab栏
			type: Boolean,
			default: false,
		},
		// 是否全屏
		isAllScreen:{
			type:Boolean,
			default:true
     
		}
	},
	data() {
		return {
			// 触屏起始点x
			touchStartX: 0, 
			// 触屏起始点y
			touchStartY: 0,
			num: 0,
			arrow:''
		};
	},
	watch: {
		active(val) {
			this.num = val;
		},
	},
	created() {
    
	},
	methods: {
		touchStart(e) {
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
		},
		touchEnd(e) {
			let deltaX = e.changedTouches[0].clientX - this.touchStartX;
			let deltaY = e.changedTouches[0].clientY - this.touchStartY;
			// console.log(deltaX, deltaY, Math.abs(deltaX), Math.abs(deltaY));
			if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
				if (deltaX >= 0) {
					if (this.loading) {
						// console.log('不能滑动');
						return;
					}
					// console.log("右滑动", this.num, this.active);
					// console.log(this.num);
					if (!this.isOnlytkScreen) {
						if (this.num == 0) {
							this.num = 0;
							return;
						} else {
							this.num--;
						}
					}
					this.arrow = 'right';
				} else {
					// console.log("左滑", this.num, this.active);
					if (!this.isOnlytkScreen) {
						if (this.num == this.list.length - 1) {
							this.num == this.list.length - 1;
							return;
						} else {
							this.num++;
						}
					}
					this.arrow = 'left';
				}
				// this.typeStatus=this.cateList[this.activeIndex].status
				// this.loadData();
				// eslint-disable-next-line vue/custom-event-name-casing
				this.$emit('getActIdx', this.num,this.arrow);
			} else if (Math.abs(deltaY) > 150 && Math.abs(deltaX) < Math.abs(deltaY)) {
				if (deltaY < 0) {
					console.log('上拉');
					this.$emit('downpull');
				} else {
					console.log('下拉');
				}
			} else {
				console.log('可能是点击！');
			}
		},
	},
};
</script>
<style lang="scss">

</style>
